<template>
  <view
    class="hover_ball_cell"
    :style="{top: `${top}px`, left: `${left}px` }"
    @touchmove="touchmove"
    @touchend="touchend"
    @touchcancel="touchcancel"
    @tap="onTap"
    :animation="ballAnimation"
  >
    <!--  -->
    <view class="wave">
      <img src="../static/report.png" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      diameter: 0,
      top: 0,
      left: 0,
      isMove: false,
      ballAnimation: {},
      timeout: null,
      modile: {}
    };
  },
  name: "shopSuspension",
  created() {
    this.modile = uni.getSystemInfoSync();
    this.top = this.modile.safeArea.top + 400;
    this.left = this.modile.safeArea.left + 20;
    this.diameter = this.modile.screenHeight / 15;
  },
  methods: {
    onTap() {
      uni.navigateTo({
        url: "/pages/declare/search"
      });
      // this.$emit("btnClick");
      // let x = "0";
      // if (2 * this.left >= this.modile.safeArea.width) {
      //   x = "-100%";
      // }
      // let create = uni.createAnimation({
      //   duration: 0
      // });
      // create.translate(x).step();
      // this.ballAnimation = create.export();
      // this.overBall();
    },
    touchmove(e) {
      this.isMove = true;
      if (this.timeout != null) {
        clearTimeout(this.timeout);
        this.timeout = null;
      }
      var touch = e.touches[0] || e.changedTouches[0];
      this.left = touch.clientX;
      this.top = touch.clientY;
    },
    touchend(e) {
      if (!this.isMove) {
        return;
      }
      this.finish(e);
    },
    touchcancel(e) {
      if (!this.isMove) {
        return;
      }
      this.finish(e);
    },
    finish(e) {
      this.isMove = false;
      var touch = e.touches[0] || e.changedTouches[0];
      this.left = touch.clientX;
      this.top = touch.clientY;
      let x = "0";
      if (2 * this.left + this.diameter >= this.modile.safeArea.width) {
        this.left = this.modile.safeArea.width;
        x = "-100%";
      } else {
        this.left = this.modile.safeArea.left;
      }
      if (
        this.top >
        this.modile.safeArea.height + this.modile.safeAreaInsets.bottom
      ) {
        this.top =
          this.modile.safeArea.height + this.modile.safeAreaInsets.bottom;
      } else if (this.top < -this.diameter / 2) {
        this.top = -this.diameter / 2;
      }
      // console.log(66666666, this.left, this.top);
      let create = uni.createAnimation({
        duration: 0
      });
      create.translate(x).step();
      this.ballAnimation = create.export();
      this.overBall();
    },
    overBall() {
      // this.timeout = setTimeout(() => {
      //   this.timeout = null;
      //   let create = uni.createAnimation({
      //     duration: 400,
      //     timingFunction: "ease-in"
      //   });
      //   create.translate("-50%").step();
      //   this.ballAnimation = create.export();
      // }, 1200);
    }
  }
};
</script>

<style lang="less" scoped>
.hover_ball_cell {
  position: fixed;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  transform: translate(-50%, 0);
  padding: 4rpx;
  box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.08);
  width: 75rpx;
  height: 75rpx;
  .wave {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    img {
      width: 38rpx;
      height: 38rpx;
    }
  }
}
</style>

